<template>
  <div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="dialogFormVisible = true" icon="el-icon-plus" v-if="_SHOWBTN(showBetCode)">新建</el-button>
    <el-dialog title="新建角色" :visible.sync="dialogFormVisible" width="403px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 角色名称：-->
        <el-form-item label="角色名称：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <!--角色编码：-->
        <el-form-item label="角色编码：" prop="name1">
          <el-input v-model="ruleForm.name1" placeholder="请输入 角色编码"></el-input>
        </el-form-item>
        <!-- 角色类型：-->
        <el-form-item label="角色类型：" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--角色描述-->
        <el-form-item label="描述：">
          <el-input
            type="textarea"
            placeholder="请输入角色描述"
            v-model="ruleForm.textarea"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!--状态：-->
        <el-form-item label=" 状态：" prop="region1">
          <el-select v-model="ruleForm.region1" placeholder="请选择"  hide-required-asterisk>
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  props: ["click","showBetCode"],
  components: {
    Upload,
  },
  data() {
    return {
      dialogFormVisible: false,
      ruleForm: {
        // 描述
        textarea: "",
        //  角色名称
        name: "",
        // 角色编码
        name1: "",
        // 角色类型
        region: "",
        // 状态
        region1: "",
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        name1: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
        region: [
          { required: true, message: "请选择组织类型", trigger: "change" },
        ],
        region1: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
      // 状态
      options: [
        {
          value: 1,
          label: "集团",
        },
        {
          value: 2,
          label: "公司",
        },
      ],
      // 角色类型
      list: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 2,
          label: "禁用",
        },
      ],
    };
  },
  created() {},
  methods: {
    // 提交
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.newRole({
            name: this.ruleForm.name,
            type: this.ruleForm.region,
            code: this.ruleForm.name1,
            remark: this.ruleForm.textarea,
            status: this.ruleForm.region1,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('新建成功')
              this.dialogFormVisible = false;
              this.$refs["ruleForm"].resetFields();
              this.ruleForm.textarea = "";
              this.ruleForm.region1 = "";
              this.click();
            } else {
              return this.$message.error(res.message);
            }
          });
        }else{
          return false
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
  width: 80px;
  height: 36px;
  background: rgba(61, 127, 255, 1);
  border-radius: 3px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 20px;
      .el-form {
        .el-form-item {
          margin: 0 0 16px 0;
          .el-form-item__label {
            width: 82px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          .el-form-item__content {
            margin-left: 90px !important;
            .el-input__inner {
              width: 260px;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
          .h1-1::before {
            content: "* ";
            color: #ff0000;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
/deep/.el-textarea__inner {
  width: 260px;
  height: 100px;
}
/deep/.el-textarea .el-input__count {
  bottom: 1px;
  right: 5px;
}
</style>